<template>
	<view class="wrapper">
		<head-title showLeftButton="true" titleText="谁看过我"></head-title>
		<scroll-view @scrolltolower="scrolltolower" scroll-y :style="{height:windowH + 'px'}">
			<nolist v-if="nolist" nolistTxt="暂无访客"></nolist>
			<view v-else class="cont">
				<view @tap="bindNav(item.user_id)" v-for="(item,index) in list":key="index" class="list flex_row">
					<view class="headPic">
						<image :src="item.avatarurl" mode="aspectFill"></image>
					</view>
					<view class="msg">
						<view class="left flex_row">
							<view class="userName flex_row">
								<text>{{item.nickname}}</text>
								<image v-if="item.gender==1" src="../../static/image/man.png"></image>
								<image v-else src="../../static/image/woman.png"></image>
							</view>
							<view class="right flex_row">
								<view class="time">{{item.update_time}}</view>
							</view>
						</view>
						<view class="txt">{{item.profile}}</view>
					</view>
				</view>
				<load :loading="loading" :loadTxt="loadTxt"></load>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import headTitle from "../../components/headTitle.vue";
	import common from '../../common/network.js';
	import load from "../../components/load.vue";
	import nolist from '../../components/nolist.vue';
	var session = '',page = 1,fullPage = 1;
	export default {
		components:{headTitle,nolist,load},
		data(){
			return{
				windowH:0,list:[],
				nolist:false,loading:false,loadTxt:'',
			}
		},
		onLoad:function(options){
			this.getHeight();
			if(options.session!=undefined){
				session = options.session;
				page = 1;
				this.getList();
			}
		},
		methods:{
			getHeight:function(){
				var that = this;
				common.network.getHeight(function(h,w,bar){
					that.windowH = h - w/750 * 142;
				})
			},
			bindTab:function(str){
				this.tab = str;
			},
			bindNav:function(id){
				uni.navigateTo({
					url:'/pagesA/userInfo/userInfo?userid='+id+'&session='+session
				})
			},
			bindSwiper:function(e){
				this.tab = e.detail.current
			},
			getList:function(){
				var that = this;
				var list = that.list;
				var $data = {
					'type':'zinfo_see_record',
					'session':session,
					'page':page,
				};
				common.network.request($data,function(res){
					console.log(res)
					fullPage = res.pageData.pagecount;
					that.loading = false;
					that.list = list.concat(res.list);
					if(list.concat(res.list)==''){
						that.nolist = true;
					}else{
						that.nolist = false;
					}
				})
			},
			scrolltolower:function(){
				this.loading = true;
				if(page>=fullPage){
					this.loadTxt = "我是有底线的";
					return false;
				}else{
					page ++;
					this.loadTxt = '正在加载...';
					this.getList();
				}
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		background: #F2F3F7;
	}
	.tabCont{
		font-size: 30px;
		box-shadow: 0 1px 10px #e1e1e1;
		background: #fff;
	}
	.tab{
		width: 50%;
		height: 88px;
		justify-content: center;
		position: relative;
		transition: all 0.4s;
	}
	.tab:after{
		content: '';
		height: 6px;
		width: 0;
		background: transparent;
		position: absolute;
		bottom: 0;
		left: 50%;
		transition: all 0.4s;
	}
	.tab.active{
		color: #676BF3;
	}
	.tab.active:after{
		background: #676BF3;
		width: 100%;
		left: 0;
	}
	.tab view{
		width: 100%;
		position: relative;
		text-align: center;
	}
	.tab view:after{
		content: '';
		height: 100%;
		width: 1px;
		background: #f1f1f1;
		position: absolute;
		top: 0;
		right: 0;
	}
	.cont{
		padding: 12px;
	}
	.list{
		padding: 30px 26px;
		background: #fff;
		margin-bottom: 10px;
		border-radius: 8px;
		/* align-items: flex-start; */
	}
	.headPic{
		width: 120px;
		height: 120px;
		min-width: 120px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 26px;
	}
	.headPic image{
		border-radius: 50%;
		width: 100%;
		height: 100%;
	}
	.msg{
		width: 528px;
	}
	.left{
		justify-content: space-between;
		padding-bottom: 10px;
	}
	.userName{
		font-size: 32px;
	}
	.userName text{
		max-width: 250px;
		white-space: nowrap;
		overflow: hidden;
	}
	.right{
		color: #EF2729;
		font-size: 26px;
	}
	.right image{
		width: 32px;
		height: 32px;
		margin-left: 10px;
	}
	.txt{
		padding-top: 10px;
		font-size: 28px;
		white-space: nowrap;
		height: 44px;
		overflow: hidden;
		width: 528px;
		text-overflow: ellipsis;
	}
	.giftImg{
		width: 80px;
		height: 80px;
		min-width: 80px;
		margin-left: 10px;
	}
	.list .time{
		color: #B9B9B9;
		font-size: 26px;
	}
	.bindhover{
		background: #f8f8f8;
	}
</style>
